<template>
  <div>
    <!--  大图  -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content-banner bg-img">
          <div class="team-bg-content">
            <el-row>
              <el-col :span="12">
                <div class="grid-content-banner-img bg-purple">
                  <div class="team-bg-content-img-box">
                    <img class="team-bg-content-img" src="../assets/img/teamMark.png" alt="">
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content-banner-text bg-purple-light">
                  <div class="team-bg-content-text-box">
                    <h1>team</h1>
                    <h3>team descripe</h3>
                    <br>
                    <span style="color: white">战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--  粉丝团总览  -->
    <div>
      <h2 class="title">粉丝团总览</h2>
      <br>
      <hr>
      <br>
      <el-table
        :data="tableData"
        stripe
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 92%; margin: 0 auto;">
        <el-table-column
          prop="groupId"
          label="groupId">
        </el-table-column>
        <el-table-column
          prop="groupMember"
          label="groupMember">
        </el-table-column>
        <el-table-column
          prop="groupName"
          label="groupName">
        </el-table-column>
        <el-table-column
          prop="groupTeamId"
          label="groupTeamId">
        </el-table-column>
        <el-table-column label="更改粉丝团信息" v-if="flag">
          <template slot-scope="scope">
            <el-button
              @click="handleGroupUpdate(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-edit"
              type="success"
              style="margin-left: 16px;">
              更改粉丝团信息
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="删除粉丝团" v-if="flag">
          <template slot-scope="scope">
            <el-button
              @click="handleGroupDel(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-delete"
              type="danger"
              style="margin-left: 16px;">
              删除粉丝团
            </el-button>
          </template>
        </el-table-column>
        <!--    加入粉丝团    -->
        <el-table-column label="加入粉丝团" >
          <template slot-scope="scope">
            <el-button
              @click="addFans(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-star-off"
              type="info"
              style="margin-left: 16px;">
              加入粉丝团
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   添加队伍   -->
      <div id="group-add" v-if="flag">
        <el-button
          round
          @click="handleGroupAdd()"
          icon="el-icon-plus"
          type="warning">
          增加粉丝团队
        </el-button>
      </div>
    </div>
    <!--  drawer  -->
    <!--  添加粉丝团  -->
    <el-drawer
      title="添加粉丝团"
      :visible.sync="drawer1"
      :with-header="true">
      <div>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupId"></el-input>
          </el-form-item>
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupName"></el-input>
          </el-form-item>
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupTeamId"></el-input>
          </el-form-item>
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupMember"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <button @click="handleAddGroupConfirm()">确认添加</button>
    </el-drawer>
    <!--  修改粉丝团信息  -->
    <el-drawer
      title="修改粉丝团信息"
      :visible.sync="drawer2"
      :with-header="true">
      <div>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupId"></el-input>
          </el-form-item>
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupName"></el-input>
          </el-form-item>
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupTeamId"></el-input>
          </el-form-item>
          <el-form-item label="memberIcon">
            <el-input v-model="formLabelAlign.groupMember"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <button @click="handleUpdateGroupConfirm()">确认修改信息</button>
    </el-drawer>
    <!--  粉丝详细信息展示  -->
    <div>
      <h2 class="title">粉丝详细信息展示</h2>
      <br>
      <hr>
      <br>
      <el-table
        :data="tableData2"
        stripe
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 92%; margin: 0 auto;">
        <el-table-column
          prop="userId"
          label="userId">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="userName">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {request} from "../network/request";
import axios from "axios";
import qs from 'qs';

export default {
  name: "FanGroup",
  data() {
    return {
      flag: false,
      tableData: [],
      tableData2: [],
      labelPosition: 'right',
      drawer1: false,
      drawer2: false,
      drawer3: false,
      formLabelAlign: {
        groupId: 0,
        groupName: '',
        groupTeamId: 0,
        groupMember: ''
      },
      sss: {
        memberId: 100001,
        groupId: 101
      }
    }
  },
  computed: {
    FanGroupName() {
      return parseInt(this.$route.params.fangroupname)
    },
  },
  methods: {
    JudgePower() {
      if (this.$store.state.userPower == 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    // 添加粉丝团button
    handleGroupAdd() {
      this.drawer1 = true
    },
    // 更新粉丝团内容button
    handleGroupUpdate(index, row) {
      this.drawer2 = true
      this.formLabelAlign.groupId = row.groupId
      this.formLabelAlign.groupName = row.groupName
      this.formLabelAlign.groupTeamId = row.groupTeamId
      this.formLabelAlign.groupMember = row.groupMember
    },
    // 删除粉丝团button
    handleGroupDel(index, row) {
      this.formLabelAlign.groupId = row.groupId
      this.handleDelGroupConfirm()
    },
    // 确认添加粉丝团
    handleAddGroupConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/fangroup/save', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认修改信息
    handleUpdateGroupConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/fangroup/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认删除粉丝团
    handleDelGroupConfirm() {
      const arr = [
        this.formLabelAlign.groupId
      ]
      axios.post('http://localhost:8081/teams/fangroup/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 加入粉丝团
    addFans(index, row) {
      axios.post('http://localhost:8081/teams/fangroup/addmember', qs.stringify({
        memberId: this.$store.state.userId,
        groupId: row.groupId
      }))
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
  },
  created() {
    this.JudgePower()

    request({
      url: '/fangroup/info/' + this.FanGroupName,
    }).then(res => {
      this.tableData.push(res.fanGroup)
      this.tableData2 = res.fans
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner-img {
  width: 100%;
  height: 521px;
  margin: 0 auto;
}

.team-bg-content-img-box {
  width: 70%;
  height: 70%;
  padding: 12%;
  margin: 0 auto;
}

.team-bg-content-img {
  width: 100%;
  height: 100%;
}

.grid-content-banner-text {
}

.bg-img {
  background-image: url("../assets/img/team_banner-bg.jpg");
}

.team-bg-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  color: white;
}

.team-bg-content-text-box {
  width: 80%;
  height: 70%;
  margin: 22% auto;
}

span {
  color: black;
}

.bg-purple {
  background-color: #d3dce6;
}

.bg-purple-light {
/ / border: 1 px solid #d3dce6;
}

.title {
  margin-top: 3%;
  margin-left: 2%;
}

#group-add {
  float: right;
  margin-top: 1%;
  margin-right: 4%;
}

.el-input {
  width: 60%;
  margin-left: 20%;
}
</style>
